<template>
  <div class="seller-header"
    :style="{background: `rgba(255, 255, 255, ${this.opacity})`}"
  >
    <div
      class="logo-wrapper"
      @click="$router.push('/')"
    >
      <img v-if="white" src="./img/white_logo.png">
      <img v-else src="./img/black_logo.png">
    </div>
    <div class="null"></div>
    <ul :style="{color: `rgb(${c}, ${c}, ${c})`}">
      <li @click="toPage('buyer')">采购商</li>
      <li @click="toPage('seller')">供应商</li>
      <li>服务商</li>
      <li>峰会</li>
      <li v-if="true">English</li>
      <li v-else>中文</li>
    </ul>
    <div class="button-wrapper">
      <button
        :style="{borderColor: `rgb(${c}, ${c}, ${c})`, color: `rgb(${c}, ${c}, ${c})`}"
        class="login"
        opacity
      >登录</button>
      <button class="register">注册</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      opacity: 0,
      c: 255,
      white: true
    }
  },
  methods: {
    toPage (url) {
      this.$router.push('/' + url)

    },
    initEvent () {
      window.addEventListener('scroll', () => {
        if (scrollY > 500) {
          this.white = false
          this.opacity = 1
          this.c = 0
        } else {
          this.white = true
          this.opacity = scrollY / 500
          this.c = 255 - 0.255 * scrollY
        }
      })
    }
  },
  mounted () {
    this.initEvent()
  }
}
</script>

<style lang="scss" scoped>
.seller-header {
  width: 100%;
  min-width: 1200px;
  height: 1.6rem;
  position: fixed;
  top: 0;
  z-index: 50;
  display: flex;
  box-sizing: border-box;
  padding: 0 .5rem;
  .logo-wrapper {
    display: flex;
    align-items: center;
    img {
      width: 7.82rem;
    }
  }
  .null {
    flex: 1;
  }
  ul {
    flex: none;
    display: flex;
    align-items: center;
    li {
      cursor: pointer;
      color: inherit;
      margin: 0 .5rem;
      font-size: .34rem;
    }
  }
  .button-wrapper {
    display: flex;
    align-items: center;
    button {
      width: 2.6rem;
      height: .8rem;
      font-size: .34rem;
      box-shadow: unset;
      margin-left: .8rem;
    }
    .login {
      color: #fff;
      border: 1px solid #fff;
    }
    .register {
      background: linear-gradient(to right, #FB6105, #FB2005);
    }
  }
}
</style>
